<customerGrid id="productGrid" th:fragment="productGrid">
    <div>
        <table id="customerGrid"></table>
        <div id="customerGridPager"></div>
    </div>
</customerGrid>
<searchForm id="searchForm" th:fragment="searchForm">
    <div class="toggle active">
        <label>Search.</label>
        <div class="toggle-content">
            <form data-example-id="input-group-with-button" class="pos-search-form" data-updater="#customerGrid">
                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group'>
                                <input type='search' class="form-control daterangepicker1" placeholder="Enter item name" id="search-name" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar fa fa-calendar "></span>
                    </span>
                            </div>
                        </div>
                    </div>
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group'>
                                <select name="paymentMethod" id="search-customerType">
                                    <option value="" >ALL</option>
                                    <option th:each="color : ${T(com.chandra.pos.customer.dao.entity.CustomerType).values()}" th:value="${color}" th:text="${color.value}" ></option>
                                </select>

                            </div>
                        </div>
                    </div>
                </div>
                <footer>
                    <button id="search-customer-btn" class="btn btn-default" type="button"><span aria-hidden="true" class="glyphicon glyphicon-search"></span>Search</button>
                    <button type="button" class="btn btn-default modelWindow" data-toggle="modal" data-target="#customerForm"><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>New Customer</button>
                    <button type="button" class="btn btn-default modelWindow" data-toggle="modal" data-target="#paymentsForm"><span aria-hidden="true" class="glyphicon glyphicon-plus" title="Receive Payment" ></span>Receive Payment</button>
                    <button type="button" class="btn btn-default modelWindow" data-toggle="modal" data-target="#paymentsForm"><span aria-hidden="true" class="glyphicon glyphicon-plus" title="New Credit Memo"></span>Credit Memo/Refund</button>
                </footer>
            </form>
        </div>
    </div>
</searchForm>
<customerForm id="customerForm" th:fragment="customerForm">
    <div data-loader="showCustomerDetails"  id="customerForm" class="modal fade bs-large-modal-lg pos-model" keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <form class="sky-form boxed" method="post" action="save" id="new-customer-form" data-updater="#customerGrid">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="model-title">New Customer</h4>
                </div><!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">
                        <input type="hidden" id="customerForm-customerId"  name="customerId" />
                        <fieldset>

                            <div class=" form-horizontal">

                                <div class="form-group">
                                    <label class="col-sm-1 control-label pull-left" for="customerForm-nickName" name="nickName">NAME</label>
                                    <div class="col-sm-9">
                                        <input type="text" placeholder="Name" id="customerForm-nickName" class="form-control uppercase" name="nickName" required="true" data-mask="C"/>
                                    </div>
                                </div>

                            </div>

                            <div class="row">

                                <!-- LEFT -->
                                <div class="col-lg-3 col-md-4">

                                    <!-- MENU -->
                                    <div class="clearfix tab-header">
                                        <ul class="side-nav list-group margin-bottom30">
                                            <li class="list-group-item active"><a aria-expanded="true" href="#tab-s1" data-toggle="tab"><i class="fa fa-cog"></i> Address Info</a></li>
                                            <li class="list-group-item"><a aria-expanded="true" href="#tab-s2" data-toggle="tab"><i class="fa fa-eye"></i> Payment Setting</a></li>
                                            <li class="list-group-item"><a aria-expanded="true" href="#tab-s3" data-toggle="tab"><i class="fa fa-lock"></i>Contact Settings</a></li>
                                         </ul>
                                    </div>
                                    <!-- /MENU -->

                                </div>

                                <!-- RIGHT -->
                                <div class="col-lg-9 col-md-8">
                                    <div class="tab-content transparent">

                                        <!-- SETTINGS TAB 1 -->
                                        <div id="tab-s1" class="tab-pane active">

                                            <div class="form-group">
                                                <label class="control-label">COMPANY NAME</label>
                                                <input class="form-control uppercase"  id="customerForm-companyName" type="text" placeholder="Company"  name="companyName" data-mask="C"/>
                                            </div>


                                            <div class="form-group">
                                                <label class="control-label">FIRST NAME</label>
                                                <input placeholder="First Name" class="form-control uppercase" type="text" id="customerForm-firstName" name="firstName" data-mask="C" />
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">MIDDLE NAME</label>
                                                <input placeholder="Middle Name" class="form-control uppercase" type="text" id="customerForm-middleName" name="middleName" data-mask="C" />
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">LAST NAME</label>
                                                <input placeholder="Last Name" class="form-control uppercase" type="text" id="customerForm-lastName" name="lastName" data-mask="C" />
                                            </div>

                                            <section class="col col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label">CITY</label>
                                                    <input placeholder="City" class="form-control uppercase" name="address.city" id="customerForm-address-city" type="text"  data-mask="C" />
                                                </div>
                                            </section>
                                            <section class="col col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label">POST CODE</label>
                                                    <input placeholder="Post code" class="form-control uppercase" name="address.pincode" id="customerForm-address-pincode" type="text" data-mask="000000" />
                                                </div>
                                            </section>
                                            <section class="col col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label">COUNTRY</label>
                                                    <label class="select">
                                                        <select name="address.country" id="customerForm-address-country">
                                                            <option value="IN">India</option>
                                                        </select>
                                                        <i></i>
                                                    </label>
                                                </div>
                                            </section>
                                        </div>


                                        <!-- SETTINGS TAB 2 -->
                                        <div id="tab-s2" class="tab-pane">

                                            <div class="form-group">
                                                <label class="control-label">CREDIT LIMIT</label>
                                                <input placeholder="Credit Limit" class="form-control" type="number" name="creditLimit" id="customerForm-creditLimit" data-mask="0#"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Account Number</label>
                                                <input placeholder="Account Number" class="form-control" type="number" name="accountNumber"  id="customerForm-accountNumber" data-mask="0#" />
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Balance Amount</label>
                                                <input placeholder="Balance Amount" class="form-control" type="number" name="balanceAmount" id="customerForm-balanceAmount" data-mask="0#" />
                                            </div>

                                        </div>

                                        <!-- SETTINGS TAB 3 -->
                                        <div id="tab-s3" class="tab-pane">

                                            <section class="col col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label">MOBILE NUMBER</label>
                                                    <input placeholder="+1800-1234-657" class="form-control" type="text" id="customerForm-mobileNumber" name="mobileNumber" data-mask="+91 0000000000" />
                                                </div>
                                            </section>

                                            <section class="col col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label">PHONE NUMBER</label>
                                                    <input placeholder="Phone Number" class="form-control" type="text" id="customerForm-phoneNumber"  name="phoneNumber" data-mask="0000-000000"  />
                                                </div>
                                            </section>

                                            <section class="col col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label">EMAIL</label>
                                                    <input placeholder="Email Address" class="form-control" type="email" name="email" id="customerForm-email"   />
                                                </div>
                                            </section>

                                            <div class="form-group">
                                                <label class="control-label">ABOUT </label>
                                                <textarea class="form-control" rows="3" placeholder="About Customer..." name="note" id="customerForm-note"></textarea>
                                            </div>


                                        </div>

                                    </div>
                                </div>

                            </div>


                        </fieldset>
                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-primary" data-dismiss="modal">Close</button>
                    <input type="submit" class="btn btn-primary" value="Save &amp; New" data-reset="true"></input>
                    <input type="submit" id="create-product" class="btn btn-primary" value="Save changes" data-reset="false"></input>
                </div><!-- /modal footer -->

            </div>
        </div>
        </form>
    </div>
</customerForm>
<customerTransactionInfo id="customerTransaction" th:fragment="customerTransactionInfo">
    <div data-loader="showTransactionDetails" id="customerTransaction" class="modal fade bs-large-modal-lg pos-model" keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="transaction-model-title">Customer Information</h4>
                </div><!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">

                    <form class="form-horizontal" id="tansaction-customer-info">
                        <div class="row">
                            <div class="">
                            <label class="col-sm-2 control-label strong">FULL NAME</label>
                            <div class="col-sm-4">
                                <p class="form-control-static" id="customerTransaction-name">email@example.com</p>
                            </div>
                            <label class="col-sm-2 control-label">CITY</label>
                            <div class="col-sm-4">
                                <p class="form-control-static" id="customerTransaction-address-city">email@example.com</p>
                            </div>

                        </div>
                        <div class="">
                            <label class="col-sm-2 control-label">MOBILE</label>
                            <div class="col-sm-4">
                                <p class="form-control-static" id="customerTransaction-mobileNumber">ACC LTD</p>
                            </div>

                            <label class="col-sm-2 control-label">EMAIL</label>
                            <div class="col-sm-4">
                                <p class="form-control-static" id="customerTransaction-email">email@example.com</p>
                            </div>
                        </div>

                        <div class="">
                            <label class="col-sm-2 control-label">BALANCE</label>
                            <div class="col-sm-4">
                                <p class="form-control-static" id="customerTransaction-balanceAmount">ACC LTD</p>
                            </div>
                            <label class="col-sm-2 control-label">UPDATED</label>
                            <div class="col-sm-4">
                                <p class="form-control-static" id="customerTransaction-lastModifiedDate">ACC LTD</p>
                            </div>
                        </div>
                        <div class="">
                            <label class="col-sm-2 control-label">COMPANY</label>
                            <div class="col-sm-4">
                                <p class="form-control-static" id="customerTransaction-companyName">ACC LTD</p>
                            </div>
                        </div>
                        <div class="">
                            <label class="col-sm-2 control-label">STATUS</label>
                            <div class="col-sm-4">
                                <p class="form-control-static" id="customerTransaction-enabled">ACC LTD</p>
                            </div>
                        </div>
                            </div>

                    </form>


                    <form    class="form-horizontal pos-search-form" data-updater="#customerTransactionGrid">
                        <input type="hidden" id="trx-customerId" name="customerId" />
                        <div class="row">
                            <div class='col-sm-4'>
                                <div class="form-group">
                                    <div class='input-group' >
                                        <select id="search-transaction-type">
                                            <option value="">ALL</option>
                                            <option th:each="color : ${T(com.chandra.pos.common.model.TransactionType).values()}" th:value="${color}" th:text="${color.value}" ></option>
                                        </select>

                                    </div>
                                </div>
                            </div>
                            <div class='col-sm-7'>
                                    <div class='input-group' id='dateRange'>
                                        <input type='text' class="form-control pos-daterangepicker" id="search-transaction-dateRange" placeholder="From Date" />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                            </div>
                            </div>
                    </form>

                    <div class="row padding10">
                        <table id="customerTransactionGrid"></table>
                        <div id="customerTransactionGridPager"></div>
                    </div>

                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <!--<button id="create-product" class="btn btn-primary">Save changes</button>-->
                </div><!-- /modal footer -->

            </div>
        </div>
    </div>
</customerTransactionInfo>
<paymentForm id="paymentForm" th:fragment="paymentForm">
    <div id="paymentsForm" class="modal fade bs-large-modal-lg pos-model" keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="customer-payment-model-title">Customer Payment</h4>
                </div><!-- /modal header -->
                <form class="sky-form boxed ui-front" method="post" action="savePayment" id="new-payment-form">
                <!-- modal body -->
                <div class="modal-body">
                        <input type="hidden" name="customerId" id="customerId" />
                        <fieldset>
                            <div class="row">
                                <section class="col col-md-7"  id="customerinfo">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-user"></i>
                                        <input type="text" placeholder="Search Customer here.." name="searchCustomer" id="search-customer" class="form-control search-customer" required="true" />
                                    </label>
                                </section>
                                <div class="col-sm-7 hide" id="customerDetail">
                                    <div class="form-group" >
                                        <div  class="input-group">
                                            <button type="button" class="btn btn-default " id="customerDetailButton">
                                                <address>
                                                    <strong id="customer-name">Chandra Shekher Kumar</strong><br/>
                                                    <strong id="customer-company">CSC India Pvt Ltd</strong><br/>
                                                    <!--<span id="customer-address">D Ring Road, Suite 600</span><br/>-->
                                                    <span id="customer-city">San Francisco, CA 94107</span><br/>
                                                    <abbr title="Phone" >P:</abbr> <span  id="customer-mobile">(123) 456-7890</span>
                                                </address>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <div id="paymentDateDiv" class="input-group date datetimepicker">
                                            <input th:value="${applicationDate}" type="text"  id="orderDate" class="form-control datepicker"  required="true"/>
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                            <section class="col col-md-3">
                                <label class="input">
                                    <select name="paymentMethod">
                                        <option th:each="color : ${T(com.chandra.pos.payment.dao.entity.PaymentMethod).values()}" th:value="${color}" th:text="${color.value}" ></option>
                                    </select>
                                </label>
                            </section>
                            <section class="col col-md-6">
                                <label class="input">
                                    <i class="icon-prepend fa fa-money"></i>
                                    <input type="text" placeholder="Amount" name="paymentAmount" required="required" class="currency"  />
                                </label>
                            </section>
                        </div>
                            <div class="row">
                                <section class="col col-md-6">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-info"></i>
                                        <input type="text" placeholder="Check Number" name="checkNumber" class="currency" />
                                    </label>
                                </section>
                            </div>
                        </fieldset>
                        <fieldset>
                            <section>
                                <label class="textarea">
                                    <i class="icon-append fa fa-pencil-square-o"></i>
                                    <textarea placeholder="Additional info" rows="3" name="comments"></textarea>
                                </label>
                            </section>
                        </fieldset>
                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button type="submit" id="create-payment-close" class="btn btn-primary">Save &amp; Close</button>
                    <button type="submit" id="create-payment-new" class="btn btn-primary">Save &amp; New</button>
                    <button type="reset" id="create-payment-clear" class="btn btn-primary">Clear</button>
                </div><!-- /modal footer -->
                </form>
            </div>
        </div>
    </div>
</paymentForm>
